<template>
  <div class='member-comment-page'>
    <!-- tabs组件 -->
    <xtx-tabs v-model="activeName">
      <xtx-tab-pane label="待评价" name='before'></xtx-tab-pane>
      <xtx-tab-pane label="已评价" name="after"></xtx-tab-pane>
    </xtx-tabs>
    <!-- 商品列表 -->
    <div class="comment-goods-list">
      <comment-goods :type="activeName" v-for="i in 8" :key="i"></comment-goods>
    </div>
    <!-- 分页组件 -->
  </div>
</template>

<script>
import XtxTabs from './components/xtx-tabs'
import XtxTabPane from './components/xtx-tab-pane'
import CommentGoods from './components/comment-goods'
export default {
  name: 'member-comment-page',
  components: { XtxTabs, XtxTabPane, CommentGoods },
  data () {
    return {
      activeName: 'before'
    }
  }
}
</script>

<style scoped lang='less'>
.comment-goods-list {
  display: flex;
  padding: 20px 50px 0;
  flex-wrap: wrap;
}
</style>
